@import url("../common/common.less");

.home_box {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../../image/1/BG02.png);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  .fake_all_box_img{
    display: none;
  }
  .bg-music{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10000;
    img{
      width:70px;
     
    }
    .music-img-start{
      animation:turn 1s linear infinite;
    }
    .music-img-close{
      display: none;
    }
  }
  .BG01-img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .btn-img {
    position: absolute;
    display: none;
    width: 500px;
    bottom: 50px;
    left: calc(50% - 250px);
    // animation-name: buzz-out;
    // animation-duration: 0.75s;
    // animation-timing-function: linear;
    // animation-iteration-count: infinite;
  }
  .hedaer-box {
    position: relative;
    .logo-img {
      z-index: 999;
      width: 628px;
      position: absolute;
      top: 40px;
      left: calc(50% - 314px);
    }
  }
  .content-box {
    position: relative;
    top:340px ;
    .people-mlf {
      display: block;
      width: 100%;
    }
    .talking-img {
      position: absolute;
      width: 400px;
      top: 600px;
      left: calc(50% - 150px);
    }
    .wind-left {
      position: absolute;
      width: 370px;
      top: 535px;
      animation: handRotate 2s linear;
      animation-iteration-count: infinite;
      transform-origin: right;
    }
    .wind-right {
      position: absolute;
      top: 530px;
      right: 0;
      width: 365px;
      animation: handRotate2 2s linear;
      animation-iteration-count: infinite;
      transform-origin: left;
    }
  }
}
@keyframes handRotate {
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes handRotate2 {
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
// @keyframes buzz-out {
//   10% {
//     -webkit-transform: translateX(3px) rotate(2deg);
//   }

//   20% {
//     -webkit-transform: translateX(-3px) rotate(-2deg);
//   }
//   30% {
//     -webkit-transform: translateX(3px) rotate(2deg);
//   }

//   40% {
//     -webkit-transform: translateX(-3px) rotate(-2deg);
//   }
//   50% {
//     -webkit-transform: translateX(3px) rotate(2deg);
//   }

//   60% {
//     -webkit-transform: translateX(-3px) rotate(-2deg);
//   }
//   70% {
//     -webkit-transform: translateX(3px) rotate(2deg);
//   }

//   80% {
//     -webkit-transform: translateX(-3px) rotate(-2deg);
//   }
//   90% {
//     -webkit-transform: translateX(3px) rotate(2deg);
//   }

//   100% {
//     -webkit-transform: translateX(-3px) rotate(-2deg);
//   }
// }
@keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
